<template>
  <view>
    <teleport to="body">
      <template v-if="displayPopup">
        <view class="popup-overlay">
          <view class="popup-content">
            <text>{{ title }}</text>
          </view>
        </view>
      </template>
    </teleport>
  </view>
</template>

<script setup>
import { ref, watchEffect, defineProps, defineExpose } from 'vue';
const displayPopup = ref(false);
//设置2s之后关闭弹框
const showPopup = () => {
  displayPopup.value = true;
  // 使用 watchEffect 监视变化，2秒后关闭弹窗
  watchEffect((onInvalidate) => {
    setTimeout(() => {
      displayPopup.value = false;
      onInvalidate();
    }, 2000);
  });
};
const { title } = defineProps(['title']); //暴露标题
//暴露showPopup方法和displayPopup
const exposed = {
  showPopup,
  displayPopup,
};
// 使用`defineExpose`将`exposed`对象暴露出去
defineExpose(exposed);
</script>

<style scoped lang="scss">
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  width: 688rpx;
  height: 168rpx;
  background-image: url('/static/Rectangle 36.png');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  text {
    width: 368rpx;
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #00d084;
    line-height: 168rpx;
  }
}
</style>
